<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>06用watch实现姓名案列</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h4>名改的时候，全名等1秒再改</h4>
        姓: <input type="text" v-model="firstName"> <br> <br>   
        名: <input type="text" v-model="lastName"> <br>  <br>  
        全名: <span>{{fullName}}</span>
    </div>
    
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                firstName:"zhang",
                lastName:"san",
                fullName:''
            },
           
            watch: {
                firstName:{
                    immediate:true,
                    handler(val){
                        this.fullName = val + '-' + this.lastName
                    }
                },
                // 
                lastName:{
                    handler(val){
                        setInterval(()=> {
                           this.fullName =  this.firstName+ '-' + val
                        },1000)
                    }
                }
                
                }
            
        })
    </script>
</body>

</html>